<template>
	<view style="position: relative;">
		<u-navbar title='逾期门店' left-icon-color="white" :autoBack="true" :titleStyle="{color:'white'}"
			bgColor="transparent"></u-navbar>
			<!-- <view style="width: 750rpx;height: 410rpx;background: linear-gradient(#f49d98, #ffffff);"></view> -->
		<image
			src="https://renovationcdn.jiachuangnet.com/mine/mineHeader.jpg"
			style="width:750rpx;height: 410rpx;"></image>
		<view class="content" style="width:700rpx;min-height:160rpx;position: absolute;top:220rpx;left:25rpx;z-index:1">	
			<u-swipe-action>
				<u-swipe-action-item v-for="(v,i ) in list" :key="v.assignTaskId" :options="options" @click='handlerClick' :name='v.assignTaskId'>
					<view class="container flex alignItem bewteen" style="padding:20rpx;width:calc(100% - 40rpx);">
						<view>
							<image style="width: 103rpx;height: 89rpx;"
								src="https://renovationcdn.jiachuangnet.com/index/yiyuqi.png">
							</image>
							<!-- <view style="margin-top:20rpx"
								:style="{'color':color,'font-size':'24rpx','text-decoration':'underline'}">逾期明细</view> -->
						</view>

						<view style="width: calc(100% - 120rpx);">
							<view class="storeName flex alignItem">
								<view style="max-width: clac(100% -60rpx);">
									{{v.assignName}}
								</view>
								<image @click='setClip(v.assignName)'
									style="width: 30rpx;height:30rpx;margin-left: 30rpx"
									src="https://renovationcdn.jiachuangnet.com/details/copy.png">
								</image>
							</view>
							<view class="storeAddress flex alignItem">
								<view style="max-width: calc(100%)">{{v.address}}</view>
							</view>
							<view
								style="display: grid;grid-template-columns: repeat(2,1fr);grid-gap: 40rpx ;margin:  30rpx 0;">
								<view class="flex">
									<view class="label">项目经理</view>
									<view class="val">{{v.projectUserName}}</view>
								</view>
								<view class="flex">
									<view class="label">门店监理</view>
									<view class="val">{{v.chargeUserName}}</view>
								</view>
								<view class="flex">
									<view class="label">店铺老板</view>
									<view class="val">{{v.customerName||'未邀请'}}</view>
								</view>
								<view class="flex">
									<view class="label">售后服务</view>
									<view class="val">{{v.afterName}}</view>
								</view>

							</view>
							<view class="flex">
								<view class="label">施工公司</view>
								<view class="val">{{v.companyName}}</view>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
			<uni-load-more :status="status" v-show="list.length!=0"></uni-load-more>
			<view style="width: 100%;height: 60vh;padding-top: 100rpx;" v-if="list.length===0">
				<u-empty
				        mode="data"
				        icon="https://renovationcdn.jiachuangnet.com/empty.jpg"
						width="100%"
						height="100%"
				>
				</u-empty>
			</view>
		</view>
		<u-popup :show="showOverdueForm" @close="close" round="10" mode="bottom">
			<view class="overdueForm">
				<view class="overdueForm_title">
					<text>逾期报备</text>
				</view>
				<text style="color: #cb2d01;padding-right: 5rpx;">*</text> <text>备注:</text>
				<view style="width: 100%;height: 20rpx;"></view>
				<u--textarea v-model="overdueReason" border="none" :disabled="disabled" placeholder="请输入逾期原因"></u--textarea>
				<view style="width: 100%;height: 20rpx;"></view>
				<text style="color: #cb2d01;padding-right: 5rpx;">*</text><text>上传逾期说明图:</text>
				<view style="width: 100%;height: 20rpx;"></view>
				<upload v-if="showOverdueForm" name="1" :fileListInit="imgList" @uploadFile="uploadFile" :disabled="disabled"></upload>
				<!-- <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10"></u-upload> -->
				<view style="width: 100%;height: 50rpx;"></view>
				<u-button type="primary" :disabled="disabled" text="提交" @click="onSubmit" v-if="loginType===3"></u-button>
			</view>
		</u-popup>
		<view v-show="list.length!=0" :style="{'color':color,'textAlign':'center'}" style="width:100%;position: fixed;bottom:120rpx;left:0;z-index:10">
			左滑，可进行更多操作
		</view>
		<!-- <signtrue  @getSignImg='getSignImg'/> -->
	</view>
</template>
<script>
	let app = getApp();
	import signtrue from '@/components/signtrue/index.vue'
	import upload from '@/components/upload/upload.vue'
	import {apiImg} from '@/api/systemConfig.js'
	export default {
		components: {
			signtrue,
			upload
		},
		data() {
			return {
				imgList:[],
				overdueReason:'',
				color: app.globalData.defaultColor,
				fileList1: [],
				disabled:false,
				options: [{
					text: '报备',
					style: {
						backgroundColor: '#13989a'
					}
				}],
				currentTaskId:0,
				showOverdueForm: false,
				pageNumber:1,
				total:1,
				pageSize:5,
				list: [],
				status:'',
				loginType:null
			}
		},
		onLoad() {
			this.loginType= uni.getStorageSync('loginType')
			this.pageNumber=1
			this.list=[]
			this.getLateReasonList()
		},
		onReachBottom(){
			if(this.list.length>=this.total){
				this.status='noMore'
				return
			}
			this.pageNumber++
			this.getLateReasonList()
		},
		methods: {
			getLateReasonList(){
				let params = {
					taskId: this.currentTaskId,
					pageNumber:this.pageNumber,
					pageSize:this.pageSize
				}
				uni.$u.http.get('/assign/getOverdueRecordsVo',{
					params
				}).then(res=>{
					console.log(res,'获取逾期列表')
					if(res){
						this.list=[...this.list,...res.data]
						this.total=res.total
						if(this.list.length>=this.total){
							this.status='noMore'
						}else{
							this.status='more'
						}
					}
					
				})
			},
			uploadFile(msg){
				this.imgList=msg.files
			},
			isSubmit(){
				uni.$u.http.get('/LateReason/isSubmit', {
					params:{
						taskId: this.currentTaskId,
					} 
				}).then(res=>{
					if(res==1){
						// 以及报备过了-回显
						this.getLateReasonByTaskId()
						this.disabled=true
						this.showOverdueForm = true;
					}else{
						if(this.loginType!=3){
							uni.$u.toast('暂无报备权限 :)');
							this.showOverdueForm = false;
						}else{
							this.overdueReason=''
							this.imgList=[]
							this.disabled=false
							this.showOverdueForm = true;
						}
					}
				})
			},
			getLateReasonByTaskId(){
				let params = {
					taskId: this.currentTaskId,
				}
				uni.$u.http.get('/LateReason/getLateReasonByTaskId', {params}).then(res=>{
					console.log(res,'获取逾期详情')
					if(res){
						this.overdueReason=res.overdueReason
						this.imgList=res.picture
					}
					
				})
			},
			handlerClick(e) {
				this.currentTaskId=e.name
				this.isSubmit()
			},
			onSubmit() {
				let params = {
					overdueReason: this.overdueReason,
					taskId: this.currentTaskId,
					picture: this.imgList
				}
				uni.$u.http.post('/LateReason/addLateReason', params).then(res => {
					if (res) {
						uni.showToast({
							title: '逾期报备成功',
							duration: 2000
						})
					}
					this.showOverdueForm = false
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log(event, event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: apiImg, // 仅为示例，非真实的接口地址
						filePath: url,
						formData: {
							user: 'test'
						},
						name: 'file',
						header: {
							'token': uni.getStorageSync('token')
						},
						success: (res) => {
							this.imgList = [...this.imgList, ...JSON.parse(res.data).result]
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			close() {
				this.showOverdueForm = false;
			},
			getSignImg(info) {
				console.log(info)
			},
			open(lat, lon, name) {
				uni.openLocation({
					latitude: Number(lat), // 纬度
					longitude: Number(lon), // 经度
					name: name, // 位置名
					scale: 16 // 缩放比例
				});
			},
			setClip(info) {
				uni.setClipboardData({
					data: info,
					success: function() {
						console.log('success');
					}
				});
			},

		}
	}
</script>
<style lang="scss" scoped>
	.overdueForm_title {
		font-weight: 700;
		display: flex;
		justify-content: center;
	}
	
	.overdueForm {
		padding: 50rpx 15rpx;
	}
	.content /deep/ .u-swipe-action-item {
		margin-bottom: 30rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.storeName {
		font-size: 28rpx;
		font-weight: 700;
	}

	.storeAddress {
		font-size: 26rpx;
		color: #787878;
		margin: 10rpx 0;
	}
</style>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>